<template>
  <div
    v-for="(item, index) in list"
    :key="index"
    class="component-item"
    @click="onItemClick(item)"
  >
    <bz-text v-bind="item" />
  </div>
  <StyledUploader @success="onImageUploaded"></StyledUploader>
</template>
<script lang="ts">
import { message } from "ant-design-vue";

import { defineComponent, PropType } from "vue";
import { v4 as uuidv4 } from "uuid";
import { imageDefaultProps, TextComponentProps } from "fast-share-bricks";
import { ComponentData } from "@/store/editor";
import StyledUploader from "./StyledUploader.vue";
// import { UploadResp } from "../extraType";
import { getImageDimensions } from "@/utils/helper";
export default defineComponent({
  name: "components-list",
  components: {
    StyledUploader,
  },
  props: {
    list: {
      type: Array as PropType<Partial<TextComponentProps>[]>,
      // type: Array,
      required: true,
    },
  },
  emits: ["on-item-click"],
  setup(props, { emit }) {
    const onImageUploaded = (resp: any) => {
      const componentData: ComponentData = {
        name: "bz-image",
        id: uuidv4(),
        props: {
          ...imageDefaultProps,
        },
      };
      componentData.props.src = resp.resp.data.url;
      message.success("上传成功");
      getImageDimensions(resp.resp.data.url[0]).then(({ width }) => {
        const maxWidth = 373;
        componentData.props.width =
          (width > maxWidth ? maxWidth : width) + "px";
      });
      emit("on-item-click", componentData);
    };
    return {
      onItemClick(props: any) {
        const componentData: ComponentData = {
          name: "bz-text",
          id: uuidv4(),
          props,
        };
        emit("on-item-click", componentData);
      },
      onImageUploaded,
    };
  },
});
</script>
<style lang="scss" scoped>
.component-item {
  width: 100px;
  margin: 0 auto;
  margin-bottom: 15px;
}
.component-item > * {
  position: static !important;
}
</style>
